<template>
  <div v-drag>
    <div class="mask" @click="closePopup(false)"></div>
    <div v-loading="loading" class="edit_box">
      <div class="box_head">
        <p>{{ productId ? '修改' : '新增' }}用户商品</p>
        <i @click="closePopup(false)"></i>
      </div>
      <div class="box_body">
        <div class="line">
          <span class="lab"><i class="mark_icon" v-if="!$route.query.userId">*</i>用户：</span>
          <div :class="{'error_border':tip_num===1}" >
            <userSelect @listenToUser="getNewProductList" :uId="userId" v-if="!$route.query.userId"/>
            <p v-else>{{$route.query.username}}</p>
          </div>
        </div>
        <div class="line">
          <span class="lab"><i class="mark_icon">*</i>商品：</span>
            <div :class="{'error_border':tip_num===2}">
              <el-select v-model="proId" filterable placeholder="请选择商品">
                <el-option v-for="(item,index) in productOption"
                           :key="index"
                           :label="item.name"
                           :value="item.id">
                </el-option>
              </el-select>
            </div>
        </div>
        <div class="line">
          <span class="lab"><i class="mark_icon">*</i>价格：</span>
          <div :class="{'error_border':tip_num===3}">
            <el-input v-model="price" :class="{'error_border':tip_num===3}" placeholder="请输入价格" type="number" @input="setPledge"></el-input>
          </div>
        </div>
        <div class="line">
          <span class="lab"><i class="mark_icon">*</i>最低购买数量：</span>
          <div :class="{'error_border':tip_num===4}">
            <el-input v-model.number="minNumber" :class="{'error_border':tip_num===4}" min="2" placeholder="请输入最低购买数量"
                      type="number" @input="setTip('','')"></el-input>
          </div>
        </div>
        <div class="line">
          <span class="lab"><i class="mark_icon">*</i>抵押金额：</span>
          <div :class="{'error_border':tip_num===5}">
            <el-input v-model.trim="pledgeMoney" :class="{'error_border':tip_num===5}" min="1" placeholder="请输入抵押金额"
                      type="number" @input="setTip('','')"></el-input>
          </div>
        </div>
        <div class="line">
          <span class="lab"><i class="mark_icon">*</i>抵押数量：</span>
          <div :class="{'error_border':tip_num===6}">
            <el-input v-model.trim="pledgeNumber" :class="{'error_border':tip_num===6}" min="2" placeholder="请输入抵押数量"
                      type="number" @input="setTip('','')"></el-input>
          </div>
        </div>
        <div class="line">
          <span class="lab"><i class="mark_icon">*</i>授权使用额度：</span>
          <div :class="{'error_border':tip_num===7}">
            <el-input v-model.trim="authNumber" :class="{'error_border':tip_num===7}" min="0" placeholder="请输入授权使用额度"
                      type="number" @input="setTip('','')"></el-input>
          </div>
        </div>
<!--        <div class="line">-->
<!--          <span class="lab">是否回收空桶：</span>-->
<!--          <div>-->
<!--            <el-radio-group v-model="isReturn">-->
<!--              <el-radio :label="1">是</el-radio>-->
<!--              <el-radio :label="0">否</el-radio>-->
<!--            </el-radio-group>-->
<!--          </div>-->
<!--        </div>-->
        <p class="error_line">{{ infoTip }}</p>
      </div>
      <div class="box_foot">
        <span @click="closePopup(false)">取消</span>
        <span @click="confirmEdit">确定</span>
      </div>
    </div>
  </div>
</template>

<script>
import {getDetail, addData, updateData} from "@/api/data/user/product";
import {listAllData} from "@/api/config/product";
import userSelect from '../../../components/user/index.vue'

export default {
  components:{
    userSelect
  },
  props: ['productId'],
  data() {
    return {
      proId: '',
      productOption: [],
      productName: '',
      pledgeMoney: 0,
      pledgeNumber:2,
      minNumber: 2,
      authNumber: 0,
      price: '',
      userId: '',
      // isReturn: 1,
      infoTip: '',
      tip_num: '',
      loading: false
    }
  },
  mounted() {
    if (this.$route.query.userId){
      this.userId = this.$route.query.userId;
    }

    this.getAllProduct();
    if (this.productId) {
      this.getDetail();
    }
  },
  methods: {
    getDetail() {
      let that = this;
      this.loading = true;
      getDetail(that.productId).then(res => {
        if (res) {
          that.setData(res);
        }
        that.loading = false;
      }).catch((e) => {
        that.loading = false;
      });
    },
    //根据所选用户获取用户所没有的列表
    getNewProductList(e) {
      this.userId = e;
      this.getAllProduct();
    },

    setData(obj) {
      this.productName = obj.productName ? obj.productName : '';
      this.pledgeMoney = obj.pledgeMoney ? obj.pledgeMoney : 0;
      this.pledgeNumber = obj.pledgeNumber ? obj.pledgeNumber : 0;
      this.price = obj.price ? obj.price :0;
      this.authNumber = obj.authNumber ? obj.authNumber :0;
      this.minNumber = obj.minNumber ? obj.minNumber :0;
      this.proId = obj.productId ? obj.productId : '';
      this.userId = obj.userId ? obj.userId : '';
    },

    // 获取全部商品
    getAllProduct() {
      let paramData = {
        display:1
      }
      if(this.userId) {
        paramData.userId = this.userId
      }
      let that = this;
      listAllData(paramData).then(res => {
        that.productOption = res ? res : [];
      }).catch((e) => {
        that.productOption = [];
      })
    },

    setPledge(e){
      this.pledgeMoney = this.pledgeNumber * e;
      this.setTip('','');
    },

    // 确认编辑
    confirmEdit() {
      if (this.userId === '') {
        this.setTip(1, '请选择用户！');
      } else if (this.proId === '') {
        this.setTip(2, '请选择商品！');
      }else if(this.price == '') {
        this.setTip(3, '请输入价格！');
      }else if(this.minNumber == '') {
        this.setTip(4, '请输入最低购买数量！');
      }else if (this.pledgeMoney === '') {
        this.setTip(5, '请输入抵押金额！');
      }
      else if(this.pledgeNumber === '') {
        this.setTip(6, '请输入抵押数量！');
      }else if (this.pledgeNumber % 1 !== 0) {
        this.setTip(6, '抵押数量需为整数！');
      }
      else if (this.authNumber === '') {
        this.setTip(7, '授权使用额度！');
      }
      else {
        this.sendInfo();
      }
    },

    sendInfo() {
      let that = this;
      that.loading = true;
      let data = {
        productId: that.proId,
        userId: that.userId,
        pledgeMoney: that.pledgeMoney,
        pledgeNumber: that.pledgeNumber,
        // isReturn: that.isReturn,
        price:that.price,
        authNumber:that.authNumber,
        minNumber:that.minNumber
      }
      if (that.productId) {
        data.id = that.productId;
        updateData(JSON.stringify(data)).then(response => {
          that.closePopup(true);
          that.$message.success({
            message: '操作成功！',
            duration: 1500
          });
          that.loading = false;
        }).catch((e) => {
          that.loading = false;
        });
      } else {
        addData(JSON.stringify(data)).then(response => {
          that.closePopup(true);
          that.$message.success({
            message: '操作成功！',
            duration: 1500
          });
          that.loading = false;
        }).catch((e) => {
          that.loading = false;
        });
      }
    },

    setTip(num, text) {
      this.tip_num = num;
      this.infoTip = text
    },

    // 关闭
    closePopup(refresh) {
      this.$emit('listenToChild', {refresh: refresh})
    }
  },
  watch:{
    proId(newP,oldP){
      this.productOption.forEach((item,index) => {
        if(this.proId == item.id) {
          this.price = item.price;
        }
      })
    }
  }
}
</script>

<style scoped>
.half_box div {
  width: 124px !important;
}

.half_box .second_lab {
  width: 75px;
}


</style>
